<form nz-form [formGroup]="validateForm">
    <nz-form-item>
        <nz-form-label [nzSpan]="7" nzRequired>姓名</nz-form-label>
        <nz-form-control [nzSpan]="12" nzHasFeedback nzValidatingTip="验证中..." [nzErrorTip]="userErrorTpl">
            <input nz-input formControlName="userName" placeholder="姓名" />
            <ng-template #userErrorTpl let-control>
                <ng-container *ngIf="control.hasError('required')">
                    请输入您的姓名
                </ng-container>
                <ng-container *ngIf="control.hasError('duplicated')">
                    The username is redundant!
                </ng-container>
            </ng-template>
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-label [nzSpan]="7" nzRequired>账号</nz-form-label>
        <nz-form-control [nzSpan]="12" nzHasFeedback nzValidatingTip="验证中 ..." nzErrorTip="请输入你的账号">
            <input nz-input formControlName="number" placeholder="账号" />
            <ng-template #userErrorTpl let-control>
                <ng-container *ngIf="control.hasError('required')">
                    请输入你的账号
                </ng-container>
                <ng-container *ngIf="control.hasError('duplicated')">
                    The username is redundant!
                </ng-container>
            </ng-template>
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-label [nzSpan]="7" nzRequired>密码</nz-form-label>
        <nz-form-control [nzSpan]="12" nzHasFeedback nzErrorTip="请输入你的密码">
            <input nz-input type="password" placeholder="密码" formControlName="password"
                (ngModelChange)="validateConfirmPassword()" />
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-label [nzSpan]="7" nzRequired>确认密码</nz-form-label>
        <nz-form-control [nzSpan]="12" nzHasFeedback nzErrorTip="密码不一致">
            <input nz-input type="password" formControlName="confirm" placeholder="确认密码" />
            <ng-template #passwordErrorTpl let-control>
                <ng-container *ngIf="control.hasError('required')">
                    请确认你的密码
                </ng-container>
                <ng-container *ngIf="control.hasError('confirm')">
                    密码不一致
                </ng-container>
            </ng-template>
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-label [nzSpan]="7" nzRequired>状态</nz-form-label>
        <app-radio #radio></app-radio>
    </nz-form-item>
    <nz-form-item>
        <nz-form-control [nzOffset]="7" [nzSpan]="12">
            <button nz-button nzType="primary" [disabled]="!validateForm.valid"
                (click)="addOrEditUser($event)">{{buttonName}}</button>
            <button nz-button (click)="resetForm($event)">清空内容</button>
        </nz-form-control>
    </nz-form-item>
</form>